<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="../../https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
	</head>
	<!-- jQuery -->
<script src="../../plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
/*  $.widget.bridge('uibutton', $.ui.button)
*/</script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Morris.js charts -->

<!-- Bootstrap WYSIHTML5 -->
<script src="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.js"></script>
<script src="../../plugins/flot/jquery.flot.min.js"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="../../plugins/flot/jquery.flot.resize.min.js"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="../../plugins/flot/jquery.flot.pie.min.js"></script>
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
<script src="../../plugins/flot/jquery.flot.categories.min.js"></script>
<script src="../../js/login.js"></script>
		<script src="../../js/jquery.cookie.js"></script>
	<body>
	<!-- Button trigger modal -->


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
      	区
        <select id="qu">
        	
        	
        </select>
           排
         <select id="pai">
        	
        	
        </select>
        架
         <select id="jia">
        	
        	
        </select>
        位
         <select id="wei">
        	
        	
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
		
		
		<table id="tab" width="100%"  class="tab table-hover table-striped">
			<tr height="50px" >
				<td>商品id</td>
				<td>目的地</td>
				<td>区</td>
				<td>排</td>
				<td>架</td>
				<td>位</td>
			</tr>
			
			
			
		</table>
		
       <div class="card card-primary card-outline">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="fa fa-bar-chart-o"></i>
                                    库存情况
                </h3>
                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fa fa-times"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <div id="donut-chart" style="height: 300px;"></div>
              </div>
              <!-- /.card-body-->
            </div>
		
		
	</body>
	
	<script>
		
		function Update(sasid,region,rank,frame,place){
			    $("#qu").empty();
				$("#pai").empty();
				$("#jia").empty();
				$("#wei").empty();
	        $("#qu").append("<option>"+region+"</option>");
			$("#pai").append("<option>"+rank+"</option>");
			$("#jia ").append("<option>"+frame+"</option>");
			$.ajax({
				 type: "post", //请求方式
				 async: true, //是否异步
				 url: "http://localhost:8072/selectnull",
				 data:{"sid":$.cookie("sid"),"regions":region,"rank":rank,"frames":frame},
				 dataType: "json", //跨域json请求一定是jsonp
	             xhrFields:{withCredent: true},
	             crossDomain: true,
				 beforeSend: function() {
					 //请求前的处理
					//alert("请求前")
				},success: function(data) {
				
					if(data==null || data==""){
						alert("此区不可调整");
						throw SyntaxError();
					}
					
				 	$.each(data, function(i,d) {
				 	      $("#wei").append("<option>"+data[i].place+"</option>")
					 });	
				    $('#myModal').modal('show');
				    
				    $("button:contains('保存')").on("click",function(){
				    
				    $.ajax({
				    	 type: "post", //请求方式
				 async: true, //是否异步
				 url: "http://localhost:8072/Updateselectnull",
				 data:{"sasid":sasid,"region":region,"rank":rank,"frame":frame,"oldplace":place,"newplace":$("#wei").val()},
				 dataType: "json", //跨域json请求一定是jsonp
	             xhrFields:{withCredent: true},
	             crossDomain: true,
				 beforeSend: function() {
					 //请求前的处理
					//alert("请求前")
				},success: function(data) {
					
					 window.location.reload();
				
				}
				    });
				    });
				    
				    
				}
				
				
				
				
			})
			
			
			
			
			
			
		}
		
		
		
		$(function(){
			
			
			
			
			
		
			  $.ajax({
           	 type: "post", //请求方式
				 async: true, //是否异步
				 url: "http://localhost:8072/selectsage",
				 data:{"sid":$.cookie("sid")},
				 dataType: "json", //跨域json请求一定是jsonp
	             xhrFields:{withCredent: true},
	             crossDomain: true,
				 beforeSend: function() {
					 //请求前的处理
					//alert("请求前")
				},success: function(data) {				 
				 	$.each(data, function(i,d) {		 		
				 		 $("#tab").append("<tr height='40px'onclick='Update("+data[i].sasid+","+data[i].region+","+data[i].rank+","+data[i].frame+","+data[i].place+",)' ><td>"+data[i].sasid+"</td><td>"+data[i].destination+"</td><td>"+data[i].region+"</td><td>"+data[i].rank+"</td><td>"+data[i].frame+"</td><td>"+data[i].place+"</td></tr>")				 	      	
					 });	
				
				}
				
				
				
				
				
			})
			
			
			
			
			
			var sc=[];
			var nums=0;			
	 	 $.ajax({
           	 type: "post", //请求方式
				 async: true, //是否异步
				 url: "http://localhost:8072/selectexamine",
				 data:{"sid":$.cookie("sid")},
				 dataType: "json", //跨域json请求一定是jsonp
	             xhrFields:{withCredent: true},
	             crossDomain: true,
				 beforeSend: function() {
					 //请求前的处理
					//alert("请求前")
				},success: function(data) {				 
				 	$.each(data, function(i,d) {
				 		sc[i]=d;		 		
					 });
					 //请求成功处理，和本地回调完全一样	
				nums=sc[0].count+sc[1].count;
     	 var donutData = [
        {
        label: sc[0].region+"区",
        data : sc[0].count/nums*100,
        color: '#3c8dbc'
        },
      {
        label: sc[1].region+"区",
        data : sc[1].count/nums*100,
        color: '#0073b7'
      }
    ]	
	$.plot('#donut-chart', donutData, {
      series: {
        pie: {
          show       : true,
          radius     : 1,
          innerRadius: 0.5,
          label      : {
            show     : true,
            radius   : 2 / 3,
            formatter: labelFormatter,
            threshold: 0.1
          }

        }
      },
      legend: {
        show: false
      }
    })		
						 
				},		
				 error: function() {
					 //请求出错处理					
				}
           	
           	
           });
			
		  
					
    
			
		});
		
		
		
		  function labelFormatter(label, series) {
    return '<div style="font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;">'
      + label
      + '<br>'
      + Math.round(series.percent) + '%</div>'
  }
		
		
		
		
		
	</script>
	
	
	
</html>
